<template>
  <div>
    <el-form :inline="true" :model="cat" class="demo-form-inline" :disabled='!controlDiable'>

      <el-form-item label="分类选择">
        <el-select v-model="cat.st1" placeholder="分类选择"  @change="get2nd">
          <el-option :label="item.name" v-for="item in category1st" :key="item.category" :value="item.category"></el-option>
        </el-select>
      </el-form-item>

       <el-form-item label="二级分类">
          <el-select v-model="cat.nd2" placeholder="二级分类"  @change="get3rd">
             <el-option :label="citem.name" v-for="citem in category2nd" :key="citem.id" :value="citem.id"></el-option>
         </el-select>
      </el-form-item>
<!-- 
       <el-form-item label="三级分类">
          <el-select v-model="cat.rd3" placeholder="三级分类"  @change="getAttriContent()">
             <el-option :label="itemRd.name" v-for="itemRd in category3rd" :key="itemRd.id" :value="itemRd.id"></el-option>
         </el-select>
      </el-form-item> -->

    </el-form>
  </div>
</template>

<script>
export default {
  name:'se',
    data(){
        return{
            cat:{
                st1:'',
                nd2:'',
                rd3:''
            },
            category1st:[],
            category2nd:[],
            category3rd:[],
        }
    },
    props:['controlDiable'],
    mounted(){
      this.get1st()
    },
    methods:{
      async get1st(){

        let res = await this.$api.category.reqCategory1st()
        if(res.status != 200) this.$message.error('请求一级分类失败')
        this.category1st = res.data
      },
     async get2nd(){
       try{
        // 清空BUG
          this.cat.nd2 = ''
          this.cat.rd3 = ''
          this.category2nd = []
          this.category3rd = []          
          let res = await this.$api.category.reqCategory2nd(this.cat.st1)
          if(res.status != 200) this.$message.error('请求二级分类失败')
          this.category2nd = res.data
       }catch(err){
          this.$message.error('请求二级分类失败')
       }
      },
      // async get3rd(){
      //   try{
      //     // 清空BUG
      //     this.cat.rd3 = ''
      //     this.category3rd = []      
      //     let res = await this.$api.category.reqCategory3rd(this.cat.nd2)
      //     if(res.status != 200) this.$message.error('请求二级分类失败')
      //     this.category3rd = res.data
      //   }catch{
      //     this.$message.error('请求三级分类失败')

      //   }
      // },
      // // 
      // getAttriContent(id){
      //   id = this.cat
      //   this.$emit('sendId',id)
      // }

      // 改为二级分类
      async get3rd(){
        try{
          // 清空BUG
        let id = this.cat
        
        this.$emit('sendId',id)
        }catch{
          this.$message.error('请求三级分类失败')

        }
      },
     
   
    }
};
</script>

<style>
</style>